<template>
  <div class="divCont">
    <div class="lineChart">
      <LakerEcharts ref="lineChart" :option="dataOption" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import isepApi from '@/api/isep'
import LakerEcharts from '@/components/lakerEcharts/index.vue'

export default {
  name: 'IsepCenterLeftcenter',
  components: { LakerEcharts },
  data() {
    return {
      indicator: [],
      dataOption: {
        backgroundColor: '',
        color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
        radar: [
          {
            indicator: [
              { name: '前置加热器', code: '1DCS_COM_RBGRL_GJ' },
              { name: '热网\n加热器', code: 'TFL_1005_SH0040_AALM1' },
              { name: '调峰炉', code: '1DCS_COM_DGLGRL_GJ' },
              { name: '燃气炉', code: 'TFL_1011_SH0082_AALM6' },
              { name: '电锅炉', code: '2DCS_SELMW' }
            ],
            alignTicks: true,
            radius: 70,
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            axisName: {
              fontSize: 10,
              width: 10,
              color: 'white'
            },
            splitArea: {
              areaStyle: {
                color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 1
              }
            },
            data: [
              {
                value: [0, 0, 0, 0, 0],
                name: '最大值',
                label: {
                  show: false,
                  color: 'yellow',
                  formatter: function (params) {
                    return params.value
                  }
                }
              },
              {
                value: [180, 0, 1080, 0, 0],
                name: '实时值',
                areaStyle: {
                  color: 'rgb(238, 197, 102)'
                },
                label: {
                  show: true,
                  color: 'red',
                  formatter: function (params) {
                    if (params.value) return params.value
                    else return ''
                  }
                }
              }
            ]
          }
        ]
      },
      dataModel: {}
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    print(val) {
      console.log(val)
    },
    initData() {
      isepApi
        .getMultiheatList({ validSta: 'A', orderJson: '[{ column: "heatId", type: "ascending" }]' })
        .then((res) => {
          if (res.code === 200) {
            const xdata = res.data
            let maxData = []
            for (let i = 0; i < xdata.length; i++) {
              this.indicator.push({
                name: xdata[i].heatName + '\n\n' + parseInt(xdata[i].heatVal) + ' GJ',
                min: 0,
                max: xdata[i].heatVal,
                code: xdata[i].sisCode
              })
              maxData.push(parseInt(xdata[i].heatVal))
            }
            this.dataOption.radar[0].indicator = this.indicator
            // this.dataOption.series[0].data[0].value = maxData
          }
        })
    },
    towNumber(val) {
      if (!val) return 0.0
      let val2 = isNaN(val) ? 0.0 : Math.round(val * 100) / 100

      return val2 < 0 ? 0.0 : val2
    },
    setData(dataModel) {
      let data = []
      for (let i = 0; i < this.indicator.length; i++) {
        data.push(this.towNumber(dataModel[this.indicator[i].code]))
      }
      this.dataOption.series[0].data[1].value = data
    }
  }
}
</script>
<style scoped lang="scss">
.divCont {
  width: 100%;
  height: 99%;
}
.lineChart {
  padding-top: 10px;
  width: 100%;
  height: 100%;
}
.website_sczb {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 5px;
}
.website_sczb div {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
}

.content-table {
  padding-top: 15px;
  margin: 0 20px;
  text-align: center;
  width: 95%;
  height: 30%;
  border-collapse: collapse;
  th,
  tr,
  td {
    width: 8.3%;
    border: 1px solid #147dcf;
    text-align: center;
    font-size: 12px;
    .content-year {
      color: gold;
    }
    .content-title {
      color: chartreuse;
    }
  }
}
.title {
  width: 100%;
  text-align: center;
  color: chartreuse;
  font-size: 20px;
}
</style>
